// 租期管理员
import React, { useState, useEffect } from 'react'

import '../../assets/css/Leasemanager.css'
import { Form, Input, Checkbox, Divider, Button, Table, Modal, Select } from 'antd'
import { DownOutlined, UpOutlined, UserOutlined } from '@ant-design/icons'
import { getData, updataAdmin } from '../../api/Leasemanager'
import axios from 'axios'
export default function Leasemanager() {
  //是否收起筛选
  let [screen, setScreen] = useState(false)
  //打开设置
  let [openSet, setOpenSet] = useState(false)

  //编辑后的表单内容
  let [adminInfo, setAdmin] = useState({
    id: '',
    adminname: '',
    adminphone: '',
    email: '',
    adminIdcard: ''
  })
  // 请求全部数据
  useEffect(() => {
    getData().then(res => {
      let data = res.data
      console.log(data);

      setDataSource([...data.data])
      console.log(dataSource);

    })
  }, [])
  // 表格数据
  const [dataSource, setDataSource] = useState([])

  const columns = [
    {
      title: '客户名称',
      dataIndex: 'clientName',
      key: 'clientName',
    },
    {
      title: '租住楼宇',
      dataIndex: 'liveBuild',
      key: 'liveBuild',
    },
    {
      title: '管理员',
      dataIndex: 'adminname',
      key: 'adminname',
    },
    {
      title: '管理员手机号',
      dataIndex: 'adminphone',
      key: 'adminphone',
    },
    {
      title: '管理员邮箱',
      dataIndex: 'email',
      key: 'email',
    },
    {
      title: '操作',
      width: '200px',
      render: (row) => {
        return <div className="clickSet">
          <div className="ysetAdmin" style={{ fontSize: '14px', color: '#8479E3' }} onClick={() => {
            setOpenSet(true)
            console.log(row);
            let info = adminInfo
            info.id = row.id
            info.adminname = row.adminname
            info.adminphone = row.adminphone
            info.email = row.email
            info.adminIdcard = row.adminIdcard
            setAdmin({ ...info })

          }}>
            {
              openSet ? <UserOutlined /> : '设置管理员'
            }
          </div>
          <Modal open={openSet} title
            ="设置租期管理员" onCancel={() => {
              setOpenSet(false)
            }} width='480px' footer={null}>
            <Form onFinish={() => {
              getData().then(res => {
                let data = res.data
                console.log(data);

                setDataSource([...data.data])
                // console.log(dataSource);

              })
            }}>
              <div className="yinfo">

                <div className="yname-phone">
                  <div className="yadminName">
                    <div className="ytext">
                      管理员姓名
                    </div>
                    <Input style={{ width: '206px', height: '36px' }} placeholder='请输入联系人姓名' value={adminInfo.adminname} onChange={(e) => {
                      let info = adminInfo
                      info.adminname = e.target.value
                      setAdmin({ ...info })
                      // console.log(adminInfo);

                    }} />
                  </div>
                  <div className="yadminPhone">
                    <div className="ytext">
                      管理员手机号
                    </div>
                    <div className="yipt">
                      <Form.Item noStyle>
                        <Select style={{ width: '73px', height: "36px", marginRight: "10px" }} defaultValue="中国+86" dropdownStyle={{ fontSize: '12px' }} >
                          <Select.Option value="中国+86">中国+86</Select.Option>
                          {/* <Select.Option></Select.Option> */}
                        </Select>
                        <Input style={{ width: '127px', height: "36px" }} placeholder='输入新手机号' value={adminInfo.adminphone} onChange={(e) => {
                          let info = adminInfo

                          info.adminphone = e.target.value
                          setAdmin({ ...info })
                          // console.log(adminInfo);

                        }} />
                      </Form.Item>

                    </div>
                  </div>
                </div>
                <div className="ymailbox-IDnumber">

                  <div className="ymailbox">
                    <div className="ytext">
                      管理员邮箱
                    </div>
                    <Input style={{ width: '206px', height: '36px' }} placeholder='请输入联系人邮箱' value={adminInfo.email} onChange={(e) => {
                      let info = adminInfo
                      info.email = e.target.value
                      setAdmin({ ...info })
                      // console.log(adminInfo);

                    }} />
                  </div>
                  <div className="yIDnumber">
                    <div className="ytext">
                      证件号
                    </div>
                    <div className="yipt">
                      <Form.Item noStyle style={{ fontSize: '12px' }}>

                        <Input style={{ width: '206px', height: "36px" }} placeholder='请输入联系人职务' value={adminInfo.adminIdcard} onChange={(e) => {
                          let info = adminInfo
                          info.adminIdcard = e.target.value
                          setAdmin({ ...info })
                          // console.log(adminInfo);

                        }} />
                      </Form.Item>

                    </div>
                  </div>

                </div>
              </div>
              <div className="yModalbtn">
                <Button onClick={() => {
                  console.log(adminInfo);

                  updataAdmin(adminInfo).then(res => {
                    console.log(res.data);
                  })

                  setOpenSet(false)
                }} type='primary' style={{ background: '#8479E3', marginRight: '20px' }} htmlType='submit'>确认</Button>
                <Button onClick={() => {
                  setOpenSet(false)
                }} type='primary'>取消</Button>
              </div>
            </Form>

          </Modal>
        </div>

      }
    },
  ];

  return (
    <>
      <div className="yLeasemanager">
        <div className="yheader">
          租期管理员
        </div>
        {/* 查询 */}
        <div className="ysearch" >
          <div className="yform" style={screen ? { height: '40px' } : { height: 'auto' }}>
            <Form>
              <Form.Item>
                <Input placeholder='请输入管理员名称' style={{ width: "348px", height: '32px' }} />
              </Form.Item>
              <Form.Item>
                <span className='yname'>管理员姓名或手机号</span>
                <Input placeholder='' style={{ width: "200px", height: '28px' }} />
              </Form.Item>
              <Form.Item>
                <span className='ytenancyterm-status'>租期状态</span>
                <Checkbox.Group>
                  <Checkbox className='ycheckBox'>
                    已设置
                  </Checkbox>
                  <Checkbox className='ycheckBox'>
                    未设置
                  </Checkbox>
                </Checkbox.Group>

              </Form.Item>

            </Form>
          </div>
          <div className="ydivider">
            <Divider
              style={{
                borderColor: '#ECEFF3', margin: 0
              }}
            >
              <Button style={{ background: ' #FBFBFD', borderRadius: '32px', fontSize: "12px", color: '#8479E3 ' }} onClick={() => {
                setScreen(!screen)

              }}>{screen ? <div><DownOutlined /> <span>打开筛选</span></div> : <div><UpOutlined /> <span>收起筛选</span></div>} </Button>
            </Divider>

          </div>
          <div className="ybtn" style={screen ? { display: 'none' } : { display: 'block' }}>
            <Button type='primary' style={{ marginRight: '20px' }}>查询</Button>
            <Button type='primary' style={{ background: '#F0F1F9 ', color: '#999CB2' }} onClick={() => {
              form.resetFields()
            }}>重置</Button>
          </div>
        </div>
        <div className="ytable">
          <Table dataSource={dataSource} columns={columns} />;
        </div>
      </div>
    </>
  )
}
